<template>
  <div class="video-box">
    <div class="title">{{videoInfo.title}}</div>
    <div class="source">
      <div class="views">浏览量：{{videoInfo.browseNum}}</div>
      <div class="origin">
        视频来源
        <span>{{ userInfo.appName }}</span>
      </div>
    </div>
    <div class="video-cnt">
      <video
        width="100%"
        height="100%"
        ref="videoplay"
        preload="true"
        controls="showControls"
        style="object-fit:cover"
        :poster="videoInfo.coverImgUrl"
        x-webkit-airplay="allow"
        x5-video-player-fullscreen="true"
      >
        <source :src="JSON.parse(videoInfo.content)['url']" type="video/mp4" />
      </video>
    </div>
    <div class="discover-disclaimer">
      <div :class="{'discover-disclaimer-hidden':!isSHowAllDisclaimer}">
        <span
          class="disclaimer-text"
        >免责声明：文章信息均来源网络，本平台对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证，仅供读者参考，本公众平台将不承担任何责任。版权归原作者所有，如有侵权请告知删除。转载请注明以上信息。如有问题请点击</span>
        <span class="discover-feedback" style="color:#445166" @click="feedback">举报反馈</span>
      </div>
      <span class="check-more" v-show="!isSHowAllDisclaimer" @click="checkMore">查看更多</span>
    </div>
  </div>
</template>

<script>
import { uuid } from '@/utils/tool'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      isSHowAllDisclaimer: false, //是否显示更多免责说明
      videoInfo: '',
      friendShareData: '',
      timelineShareData: '',
      shareUuid: ''
    }
  },
  created() {
    this.videoInfo = this.$route.params.content || ''
    this.shareUuid = uuid()
    // 从举报反馈跳转回来获取sessionStorage数据
    if (!this.videoInfo && window.sessionStorage.getItem('sourceVideoInfo')) {
      this.videoInfo = JSON.parse(window.sessionStorage.getItem('sourceVideoInfo'))
    } else {
      window.sessionStorage.setItem('sourceVideoInfo', JSON.stringify(this.videoInfo))
    }
    this.setShare()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    //免责查看更多
    checkMore() {
      this.isSHowAllDisclaimer = true
    },
    // 设置分享
    async setShare() {
      let host = process.env.VUE_APP_APP_URL
      host = `${host}aw-h5/#/houseMaterial/${this.videoInfo.materialId}?agentId=${this.userInfo.agentId}&enterpriseId=${this.userInfo.enterpriseId}&shareUuid=${this.shareUuid}&type=1&linkerId=${this.videoInfo.linkerId}`
      this.friendShareData = {
        title: this.videoInfo.title,
        desc: this.videoInfo.summary || '我在用AW大师，邀请你一起看热点',
        imgUrl: this.videoInfo.coverImgUrl,
        link: host
      }
      this.timelineShareData = {
        title: this.videoInfo.title,
        desc: this.videoInfo.summary || '我在用AW大师，邀请你一起看热点',
        imgUrl: this.videoInfo.coverImgUrl,
        link: host
      }
      this.friendShareData.success = this.timelineShareData.success = this.articleShare
      this.friendShareData.cancel = this.timelineShareData.cancel = this.articleShare
      window.awHelper.wechatHelper.setShare(this.friendShareData, this.timelineShareData)
    },
    // 分享成功之后
    articleShare() {
      setTimeout(() => {
        // 成功回调后500毫秒再调接口
        this.shareUuid = uuid()
      }, 500)
    },
    // 举报反馈
    feedback() {
      this.$router.push({ path: '/discover/reportFeedback', query: { linkerId: this.linkerId, articleType: 4, id: this.videoInfo.materialId } })
    }
  },
  filters: {
    formatDuration(val) {
      let time = ''
      if (val) {
        let theTime = parseInt(val)
        let middle = 0
        let hour = 0
        if (theTime > 60) {
          middle = parseInt(theTime / 60)
          theTime = parseInt(theTime % 60)
          if (middle > 60) {
            hour = parseInt(middle / 60)
            middle = parseInt(middle % 60)
          }
        }
        time = `00 : ${theTime}`
        if (middle > 0) {
          time = `${middle} : ${time}`
        }
        if (hour > 0) {
          time = `${hour} : ${time}`
        }
      }
      return time
    }
  }
}
</script>

<style lang="less" scoped>
//免责
.discover-disclaimer {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  background: #fff;
  color: #969ea8;
  font-size: 14px;
  line-height: 1.5;
  .check-more {
    color: #007ae6;
  }
  .discover-disclaimer-hidden {
    height: 20px;
    max-width: 82%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.video-box {
  font-size: 14px;
  padding: 20px 16px;
  .title {
    font-size: 22px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 30px;
  }
  .source {
    margin-top: 14px;
    display: flex;
    color: #969ea8;
    .views {
      flex: 1;
    }
    .origin {
      margin-left: 0;
      span {
        color: #40516f;
        margin-right: 5px;
      }
    }
  }
  .video-cnt {
    margin-top: 30px;
    height: 195px;
    background-color: #000;
    video {
      height: 195px;
      width: 100%;
    }
  }
  .tips {
    margin-top: 32px;
    color: #9ca5b5;
    line-height: 22px;
    span {
      color: #40516f;
    }
  }
}
</style>
